
<template>
  <div class="login-container">
    <div class="loginTitle">注册账号</div>
    <div class="card">
      <div class="form-container">
        <div class="form-item">
          <div class="input">
            <img class="logoTop" src="../../img/login/Rectangle90Coy4@2x.png"/>
            <input v-model="name" type="text" placeholder="请输入姓名" @input="validateName"/>
          </div>
        </div>
        <div class="form-item">
          <div class="input">
            <img class="logoTop" src="../../img/login/Rectangle90Coy4@2x.png"/>
            <input v-model="phone" type="text" placeholder="请输入手机号码"/>
          </div>
        </div>
        <div class="form-item">
          <div class="input">
            <img class="logoTop" src="../../img/login/Rectangle90Copy@2x.png"/>
            <input v-model="code" type="text" placeholder="请输入验证码"/>
            <div class="verify" @click="getCode">
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </div>
          </div>
        </div>
      </div>
      <div class="tipsCenter">
        <div class="tips">
          <img @click="noPhoneHandler" class="logoTop" v-if="suncode==1" src="../../img/login/check-circle@3x.png"/>
          <img @click="noPhoneHandler" class="logoTop" v-if="suncode==2" src="../../img/login/check-circle1@3x.png"/>
        </div>
        <span @click="noPhoneHandler">我已详细阅读并同意<a @click.stop="showPrivacyPopup = true">《隐私政策》</a></span>
        
        <!-- Privacy Policy Popup -->
        <van-popup 
          v-model:show="showPrivacyPopup"
          round
          position="center"
          :style="{ width: '80%', padding: '20px' }"
        >
          <div class="privacy-popup">
            <img 
              src="../../img/student/close.png" 
              class="close-btn"
              @click="showPrivacyPopup = false"
            />
            <h3>隐私政策</h3>
            <div class="privacy-content">
              <p>1. 我们非常重视用户的隐私保护，承诺严格遵守相关法律法规。</p>
              <p>2. 我们收集的个人信息仅用于账户注册、登录和提供服务。</p>
              <p>3. 未经用户同意，我们不会向第三方提供、出售或出租用户的个人信息。</p>
              <p>4. 用户有权随时访问、更正或删除自己的个人信息。</p>
              <p>5. 我们采取合理的安全措施保护用户信息，防止未经授权的访问、使用或泄露。</p>
              <p>6. 本政策可能会不时更新，请定期查看以了解最新内容。</p>
            </div>
            <van-button 
              type="primary" 
              color="#0BBBFC" 
              block 
              @click="handlePrivacyRead"
              style="margin-top: 20px;"
            >
              我已阅读
            </van-button>
          </div>
        </van-popup>
      </div>

      <div class="button-container">
        <van-button class="button-containerClick" round type="primary" color="#0BBBFC" block @click="registerHandler"
                    v-if="suncode==1" style="opacity: 0.5">
          注册
        </van-button>
        <van-button class="button-containerClick" round type="primary" color="#0BBBFC" block @click="registerHandler"
                    v-else>
          注册
        </van-button>
      </div>
      <div class="register-link">
        已有账号？<span @click="$router.push('/login')">去登录</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useUserStore} from '@/stores'
import {useRouter, useRoute} from 'vue-router'
import {ref} from 'vue'

const showPrivacyPopup = ref(false)
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const name = ref('')
const phone = ref('')
const code = ref('')
const countdown = ref(0)
const timer = ref(null)

const validateName = () => {
  // 只允许中文、字母、数字和空格
  name.value = name.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s]/g, '')
}

const suncode = ref('1')
document.title = '注册';

const noPhoneHandler = () => {
  if (suncode.value == 1) {
    suncode.value = 2
  } else {
    suncode.value = 1
  }
}

const handlePrivacyRead = () => {
  showPrivacyPopup.value = false
  suncode.value = 2
}

const validatePhone = (phone) => {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(phone)
}

const clearCountdown = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  countdown.value = 0
}

const getCode = async () => {
  if (countdown.value > 0) return
  
  if (!phone.value) {
    showFailToast('请输入手机号')
    return
  }
  if (!validatePhone(phone.value)) {
    showFailToast('请输入正确的手机号码')
    return
  }
  
  // 启动60秒倒计时
  countdown.value = 60
  timer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearCountdown()
    }
  }, 1000)
  
  // 这里添加获取验证码的逻辑
  showSuccessToast('验证码已发送')
}

const registerHandler = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })

  if (suncode.value == 1) {
    showFailToast('请勾选条款')
    return
  }
  if (!name.value) {
    showFailToast('请输入姓名')
    return
  }
  if (!phone.value) {
    showFailToast('请输入手机号')
    return
  }
  if (!code.value) {
    showFailToast('请输入验证码')
    return
  }

  // 这里添加注册逻辑
  showSuccessToast('注册成功')
  router.push('/login')
}
</script>

<style scoped lang="less">
.privacy-popup {
  position: relative;
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    
    &:hover {
      opacity: 1;
    }
  }

  h3 {
    text-align: center;
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
  }
  
  .privacy-content {
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    
    p {
      margin-bottom: 10px;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }
}

.loginTitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 34px;
  color: #333333;
  line-height: 48px;
  letter-spacing: 1px;
  text-align: left;
  margin: 119px 36px 0px;
  font-style: normal;
}

.logoTop {
  width: 100%;
}

.login-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;

  .top {
    position: relative;
    background: @default-color;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: end;
    justify-content: center;

    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 17px;
      height: 132px;
      background: #fff;
      border-radius: 8px;
      opacity: 0.2;
    }

    &::after {
      right: 49px;
      top: 76px;
    }

    &::before {
      right: 16px;
      top: 99px;
    }

    .ban {
      position: relative;
      width: 86%;
      height: 100px;
      background: #fff;
      border-radius: 8px 8px 0 0;
      z-index: 1;
      display: flex;

      .zhu {
        position: absolute;
        border-radius: 8px;
        width: 17px;

        &.zhu01,
        &.zhu03,
        &.zhu05 {
          background: @default-color;
          height: 60px;
        }

        &.zhu02,
        &.zhu04 {
          background: #fff;
          border-radius: 8px 8px 0 0;
          height: 50px;
        }

        &.zhu01 {
          left: 60px;
          top: 0;
          height: 60px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu02 {
          left: 77px;
          top: -50px;
        }

        &.zhu03 {
          left: 94px;
          top: 0;
          height: 80px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu04 {
          left: 111px;
          top: -30px;
          height: 30px;
        }

        &.zhu05 {
          left: 128px;
          top: 0;
          height: 30px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu06 {
          background: @default-color;
          width: 17px;
          height: 17px;
          left: 94px;
          top: 90px;
          border-radius: 50%;
        }
      }
    }
  }

  .card {
    position: relative;
    margin: 18px 35px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      line-height: 12px;
      text-align: left;
      font-style: normal;
    }
    .form-container {
      .form-item {
        background: #F6FAFF;
        display: flex;
        align-items: center;
        height: 49px;
        margin-bottom: 18px;
        border-radius: 27px;
        overflow: hidden;
        .input {
          margin-left: 10px;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          font-size: 14px;
          background: #F6FAFF;
          img {
            width: 17px;
            margin-right: 10px;
          }

          input {
            width: 60%;
            height: 100%;
            border: none;
            padding-top: 2px;
            background: #F6FAFF;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
        }

        .iconfont {
          font-size: 20px;
          color: @text-color-02;
        }
      }
    }
    .button-container {
      font-style: normal;
    }
    .footer-container {
      display: flex;
      justify-content: space-evenly;
      .item {
        .iconfont {
          font-size: 30px;
        }
      }
    }
  }
  .tips {
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 44px;
    img {
      width: 12px;
      height: 12px;
      margin-right: 8px;
    }
  }
  .tipsCenter{
    display: flex;
    a {
      color: #0BBBFC;
    }
  }
  .button-containerClick {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }
  .verify{
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #0BBBFC;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
}

:v-deep(.van-divider) {
  margin: 10px 0;
}
.register-link {
  margin-top: 16px;
  text-align: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;

  span {
    color: #2987FD !important;
    cursor: pointer;
  }
}
</style>
